<template>
	<view class="">
		<logintopVue></logintopVue>

		<!--页面主体，在弹出活动的时候要隐藏-->
		<view class="hdpagein" :style="'display:'+(showmain ? 'block' : 'none')+';'">
			<view class="mainbox">

				<swiper :autoplay="true" :interval="3000" :circular="true" style="height: 300rpx;margin-bottom: 20rpx;">
					<swiper-item v-for="(item , i) in bannerlist" style="padding: 0 4rpx;" @click="ophd2(i+1)">
						<image class="w100 h100" :src="item.image"></image>
					</swiper-item>
				</swiper>
				<!--3个按钮-->
				<view class="bj_between mb30">
					<image src="/static/page1/1.png" class="mainbox-toppic" mode="widthFix" @click="clsbtn(4)"></image>
					<image src="/static/page1/2.png" class="mainbox-toppic" mode="widthFix" @click="clsbtn(3)"></image>
					<image src="/static/page1/3.png" class="mainbox-toppic" mode="widthFix" @click="clsbtn(7)"></image>
				</view>
				<!--6个按钮-->
				<view class="bj_between mb30">
					<view class="mainbox-mbtn" @click="clsbtn(i+1)" v-for="(item , i) in l6">
						<image :src="item" mode="widthFix"></image>
						<view class="">
							{{$t('page1.mb' + (i+1))}}
						</view>
						<view class="hdd" v-if="i == 0">

						</view>
					</view>
				</view>
				<!--搜索-->
				<view class="mainbox-findbox bj_between mb30" @click="findact(true)">
					<text>{{$t('page1.inptxt')}}</text>
					<image src="/static/f.png" mode="widthFix"></image>
				</view>

				<!--游戏分类-->
				<view class="mainbox-gameflbox mb30">
					<view class="mainbox-gameflbox-listbox">

						<view class="mainbox-gameflbox-listbox-item" v-for="(item , i) in gmflist" @click="chgf(i)">
							<image :src="item.pic" class="mainbox-gameflbox-listbox-item-pic" :class="item.piccalss"
								mode="heightFix">
							</image>
							<view class="mainbox-gameflbox-listbox-item-txt" :class="item.piccalss">
								{{item.pro_name}}
							</view>
							<image :class="item.jdclass" src="/static/page1/gg.png" class="mainbox-gameflbox-listbox-gg"
								mode="widthFix">
							</image>
						</view>

					</view>
				</view>

			</view>
			<!-- 游戏列表区域 -->
			<view class="">
				<!--选中第一个的时候出现全部列表-->
				<gamelist v-for="(item , i) in gmflist" :obj="item" :gi="i" :iftit="true" v-if="nowgf == 0"></gamelist>

				<gamelist :obj="gmflist[nowgf]" :iftit="false" v-if="nowgf != 0"></gamelist>
			</view>
			<!--底部-->
			<bottomVue></bottomVue>

		</view>
		<view style="overflow: hidden;">
			<!--活动-->
			<component :is="pageurl" ref="component" />
		</view>

		<!--两边的浮动层-->
		<kzlrVue></kzlrVue>

		<!--通用盖层 -->
		<gcVue ref="gc"></gcVue>

		<view class="pof w100 h100 lt0" v-if="loading" style="background: #0F194D;z-index: 9999;">
			<zero-loading type="surround"></zero-loading>
		</view>


		<gamefindVue v-if="shof"></gamefindVue>
		<moneygcVue ref="mgcv"></moneygcVue>
	</view>

</template>

<script setup>
	import {
		onShow,
		onLoad,
		onHide
	} from "@dcloudio/uni-app"
	import {
		onPageScroll
	} from '@dcloudio/uni-app'
	import {
		ref,
		provide,
		onMounted
	} from "vue";
	import gcVue from "../common/gc.vue";
	import logintopVue from "../common/logintop-slotsbr.vue";
	import useI18n from '@/store/useI18n.js'
	import gamelist from "../common/gamelist-slotsbr.vue";
	import common from "../../js/common";
	import bottomVue from "../common/bottom-slotsbr.vue";
	import kzlrVue from "../common/kzlr-slotsbr.vue";
	import qdVue from "../hd/qd-slotsbr.vue";
	import lhjVue from "../hd/lhj.vue";
	import fxpageVue from "../hd/fxpage.vue";
	import baoVue from "../hd/bao.vue";
	import yhjVue from "../hd/yhj.vue";
	import vipVue from "../hd/vip.vue";
	import cardVue from "../hd/card.vue";
	import voltarVue from "../hd/voltar.vue";
	import jljzVue from "../hd/jljz.vue";
	import cpjlVue from "../hd/cpjl.vue";
	import ycjjVue from "../hd/ycjj.vue";
	import xzVue from "../hd/xz.vue";
	import zwwVue from "../hd/zww.vue"
	import gamefindVue from "../common/gamefind.vue";
	import moneygcVue from "../common/moneygc.vue";
	let mgcv = ref(null)
	let shof = ref(false)

	const {
		t
	} = useI18n()
	let gc = ref(null)
	let nowgf = ref(-1) // 当前选中的游戏分类序号

	let gmflist = ref([])
	let showmain = ref(true)
	let pageurl = ref(null)
	let loading = ref(false)

	provide("opgc", opgc);
	provide("clhd", clhd);
	provide("ophd", ophd);
	provide("clgc", clgc);
	provide("findact", findact);


	function findact(v) {
		shof.value = v
	}

	onShow(function(e) {
		// 获取页面栈的实例数组
		const pages = getCurrentPages();
		// 获取当前页面实例
		const currentPage = pages[pages.length - 1];
		// 获取当前页面路径
		const currentRoute = "/" + currentPage.route;
		getApp().globalData.taburl = currentRoute
		pageurl.value = null
		showmain.value = true

		if (getApp().globalData.dl) {
			opgc(1, 2)
			getApp().globalData.dl = false
		} else {
			try {
				gc.value.clgc()
			} catch (error) {
				//TODO handle the exception
			}

		}

		updateTabBarTexts();
	})

	// 初始化菜单名称
	const updateTabBarTexts = () => {

		const tabMap = {
			0: 'menu1',
			1: 'menu2',
			2: 'menu3',
			3: 'menu4',
			4: 'menu5'
		}
		Object.entries(tabMap).forEach(([index, key]) => {
			uni.setTabBarItem({
				index: parseInt(index),
				text: t(key)
			})
		})
	}

	onHide(function() {
		pageurl.value = null
		showmain.value = true
	})

	onMounted(function() {
		if (!getApp().globalData.userInfo) {
			opgc(2, 2)
		}
	})

	onLoad(function(e) {
		if (window.location.hash === '#/' || window.location.hash === '#/index') {
			const newUrl = window.location.origin + window.location.search
			window.history.replaceState({}, '', newUrl)
		}
		// console.log(common.sendRoibestEvent());
		const urlParams = new URLSearchParams(window.location.search)
		getData();
		if (e.code) {
			getApp().globalData.code = e.code
		}
		if (urlParams.get('code')) {
			getApp().globalData.code = urlParams.get('code')
		}
		if (e.hd == "zww") {
			setTimeout(function() {
				ophd(13)
			}, 1000)
		}
		if (urlParams.get('hd') == "zww") {
			setTimeout(function() {
				ophd(13)
			}, 1000)
		}


		common.viewReport({
			click_id: JSON.parse(localStorage.getItem(`__rb_${common.roibest_appid}_click_id`)),
			link_id: JSON.parse(localStorage.getItem(`__rb_${common.roibest_appid}_link_id`))
		}).then(res => {
			// console.log(res);
		})
	})
	// 切换游戏分类
	function chgf(i) {
		if (nowgf.value != -1) {
			let item = gmflist.value[nowgf.value]
			item.piccalss = "op1-03"
			item.jdclass = "op1-0"
		}
		nowgf.value = i
		let item = gmflist.value[i]
		item.piccalss = "op03-1"
		item.jdclass = "op0-1"
	}

	// 根据类型打开盖层
	function opgc(v, t) {
		gc.value.opgc(v, t)
	}
	// 关闭盖层
	function clgc() {
		gc.value.clgc()
	}
	let bannerlist = ref([])

	let l6 = ref([])

	function getData() {
		loading.value = true
		common.getV2page().then((res) => {
			l6.value = res.data.data[0].home_icons
			for (var i = 0; i < res.data.data[0].product_type.length; i++) {
				let json = res.data.data[0].product_type[i]
				json.ch = false;
				json.piccalss = "";
				json.jdclass = "";
				gmflist.value.push(json)
			}
			bannerlist.value = res.data.data[0].data
			// console.log(bannerlist.value);
			chgf(0)
		})
		loading.value = false
	}

	function clsbtn(v) {
		if (getApp().globalData.userInfo == null) {
			opgc(1, 2)
		} else {
			if (v == 1) {
				ophd(0)
			} else if (v == 2) {
				ophd(1)
			} else if (v == 3) {
				ophd(2)
			} else if (v == 4) {
				ophd(3)
			} else if (v == 5) {
				ophd(4)
			} else if (v == 6) {
				ophd(5)
			} else if (v == 7) {
				ophd(13)
			}
		}

	}
	/**
	 * 打开活动界面
	 * @param {Object} tag 0每日签到活动，1老虎机，2分享，3好友邀请奖励
	 */
	function ophd(tag) {
		if (tag == 0) {
			pageurl.value = qdVue
		} else if (tag == 1) {
			pageurl.value = lhjVue
		} else if (tag == 2) {
			pageurl.value = fxpageVue
		} else if (tag == 3) {
			pageurl.value = baoVue
		} else if (tag == 4) {
			pageurl.value = yhjVue
		} else if (tag == 5) {
			pageurl.value = vipVue
		} else if (tag == 6) { // 签到领宝箱
			uni.navigateTo({
				url: "/pages/index/qd"
			})
		} else if (tag == 7) { // 卡牌
			pageurl.value = cardVue
		} else if (tag == 8) { // 历史记录
			pageurl.value = voltarVue
		} else if (tag == 9) { // 奖励机制
			pageurl.value = jljzVue
		} else if (tag == 10) { // 卡池奖励
			pageurl.value = cpjlVue
		} else if (tag == 11) { // 预存奖金
			pageurl.value = ycjjVue
		} else if (tag == 12) { // 下载
			pageurl.value = xzVue
		} else if (tag == 13) { // 抓娃娃
			pageurl.value = zwwVue
		}
		setTimeout(function() {
			showmain.value = false
		}, 300)
	}
	// 关闭活动
	function clhd() {
		showmain.value = true
		setTimeout(function() {
			pageurl.value = null
		}, 300)
	}

	function ophd2(i) {
		if (getApp().globalData.userInfo == null) {
			opgc(1, 2)
			return
		}
		if (i == 1) {
			pageurl.value = baoVue
		} else if (i == 2) {
			pageurl.value = qdVue
		} else if (i == 3) {
			pageurl.value = zwwVue
		} else if (i == 4) {
			pageurl.value = xzVue
		} else if (i == 5) {
			pageurl.value = jljzVue
		} else if (i == 6) {
			pageurl.value = lhjVue
		} else if (i == 7) {
			pageurl.value = vipVue
		} else if (i == 8) {
			uni.navigateTo({
				url: "/pages/index/tx?v=1"
			})
		} else if (i == 9) {
			pageurl.value = cpjlVue
		} else if (i == 10) {
			pageurl.value = ycjjVue
		} else if (i == 11) {
			pageurl.value = voltarVue
		} else if (i == 12) {
			pageurl.value = fxpageVue
		} else if (i == 13) {
			gc.value.opgc(23, 1)
		} else if (i == 14) {
			window.open(getApp().globalData.config2.kfurl)
		}
	}
</script>

<style lang="scss">
	.mainbox {
		padding: 20rpx 22rpx 30rpx;
		background: #003311;

		&-toppic {
			width: 220rpx;
		}

		&-mbtn {
			width: 114rpx;
			position: relative;
			font-size: 22rpx;
			text-align: center;
			color: #9C9FB2;

			image {
				width: 104rpx;
				margin-bottom: 10rpx;
			}
		}

		&-findbox {
			height: 64rpx;
			background: #095623;
			border-radius: 100rpx;
			border: 2rpx solid #126C30;
			padding: 0 32rpx;
			color: #9C9FB2;

			image {
				width: 32rpx;
			}
		}

		&-gameflbox {
			padding-bottom: 14rpx;
			background: url("/static/page1/gb.png") no-repeat center 100%;
			background-size: 100% auto;

			/* 隐藏滚动条 */
			&-listbox::-webkit-scrollbar {
				display: none !important;
			}

			&-listbox {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				overflow-x: scroll;
				gap: 30rpx;
				position: relative;
				white-space: nowrap;

				&-item {
					position: relative;
					text-align: center;
					font-size: 20rpx;
					margin: 0 10rpx;

					&-pic {
						position: relative;
						height: 60rpx;
						margin-bottom: 14rpx;
						opacity: 0.3;
						z-index: 1;
					}

					&-txt {
						position: relative;
						opacity: 0.3;
						z-index: 1;
					}
				}

				&-gg {
					width: 128rpx;
					position: absolute;
					bottom: 0;
					left: calc(50% - 64rpx);
					opacity: 0 !important;
				}
			}
		}
	}



	.op03-1 {
		opacity: 0.3;
		animation: op031d 0.3s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes op031d {
		0% {
			opacity: 0.3;
		}

		100% {
			opacity: 1;
		}
	}

	.op1-03 {
		opacity: 1;
		animation: op103d 0.3s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes op103d {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0.3;
		}
	}

	.op0-1 {
		opacity: 1 !important;
		animation: op01d 0.3s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes op01d {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.op1-0 {
		opacity: 0 !important;
		animation: op10d 0.3s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes op10d {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	.kzlbox {
		position: fixed;
		bottom: 354rpx;
		left: 22rpx;
		width: 160rpx;

		&-picbox {
			position: relative;
			width: 160rpx;
			height: 160rpx;
			margin-bottom: 20rpx;

		}

		&-pictxt {
			position: absolute;
			padding-top: 62rpx;
			color: #060C32;
			font-size: 36rpx;
		}
	}

	.kzlboxdh1 {
		transform: translateX(0%);
		animation: kzlboxdh1d 0.1s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes kzlboxdh1d {
		0% {
			transform: translateX(0%);
		}

		100% {
			transform: translateX(-60%);
		}
	}

	.kzlboxdh2 {
		transform: translateX(-60%);
		animation: kzlboxdh2d 0.1s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes kzlboxdh2d {
		0% {
			transform: translateX(-60%);
		}

		100% {
			transform: translateX(0%);
		}
	}

	.kzrbox {
		position: fixed;
		bottom: 354rpx;
		right: 22rpx;
		width: 160rpx;

		&-picbox {
			width: 160rpx;
			height: 160rpx;
			margin-bottom: 36rpx;
		}
	}

	.kzrboxdh1 {
		transform: translateX(0%);
		animation: kzrboxdh1d 0.1s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes kzrboxdh1d {
		0% {
			transform: translateX(0%);
		}

		100% {
			transform: translateX(60%);
		}
	}

	.kzrboxdh2 {
		transform: translateX(60%);
		animation: kzrboxdh2d 0.1s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes kzrboxdh2d {
		0% {
			transform: translateX(60%);
		}

		100% {
			transform: translateX(0%);
		}
	}

	/* PC端适配 */
	@media (min-width: 768px) {
		.kzlbox {
			left: 22rpx !important;
			width: 160rpx !important;
		}

		.kzrbox {
			right: calc(50vw - 375rpx) !important;
			width: 160rpx !important;
		}
	}
</style>